<!DOCTYPE html>
<html lang="zh">

<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>关于我们</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/about.css">
</head>

<body>
<div class="home">


    <div class="header  animated fadeIn">
        <div class="box">
            <div class="l">
                <a href="./index.html" class="logo">
                    <img src="./images/logo.svg" alt="">
                </a>
                <div class="links">
                    <a href="./products.html">Catalogue</a>
                    <a href="./creative.html">Creative</a>
                    <a href="./about.html" class="active">About</a>
                    <a href="./contact.html">Contact</a>
                </div>
            </div>
            <div class="r">
                <a href="">CN/EN</a>
            </div>
        </div>
    </div>

    <div class="pheader">
        <div class="menu">
            <a href="./index.html" target="_self" class="animated fadeInUpLeft">
                <img src="./images/logo.svg" alt="">
            </a>
            <div class="navbox">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>
    </div>
    <div class="menuList">
        <div class="item">
            <div class="tb">
                <a href="./products.html">Catalogue</a>
            </div>
        </div>
        <div class="item">
            <div class="tb">
                <a href="./creative.html" >Creative</a>
            </div>
        </div>
        <div class="item">
            <div class="tb">
                <a href="./about.html">About</a>
            </div>
        </div>
        <div class="item">
            <div class="tb">
                <a href="./contact.html">Contact</a>
            </div>
        </div>
    </div>

    <div class="cbg" aos="fade-right">
        <img src="./images/pbg2.png" alt="">
    </div>

    <div class="cbg2" aos="fade-left">
        <img src="./images/cbg2.png" alt="">
    </div>

    <div class="section1">
        <img src="./images/bg.png" class="common_bg" alt="">
        <img src="./images/t1.png" aos="fade-down" class="t1" alt="">
        <img src="./images/t2.png" aos="fade-down" class="t2" alt="">
        <div class="text" aos="fade-up">Creating Skincare Packaging Solution</div>
        <div class="position"  aos="fade-up" aos-delay="100">
            Customer demand first concept<br>
            Product high-quality assurance<br>
            Service satisfaction<br>
            Honest trade
        </div>
    </div>

    <div class="section2">
       <div class="t1">
           <img src="./images/z.png" alt="">
       </div>
        <img src="./images/z2.png" class="t2" alt="">
        <img src="./images/z3.png" class="t3" alt="">
        <div class="l" aos="fade-up">
            <div class="swiper1 swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/zs1.png" alt="">
                    </div>
                </div>
            </div>
            <div class="button">
                <img src="./images/prev.png" alt="">
                <img src="./images/next.png" alt="">
            </div>
        </div>
        <div class="r" aos="fade-up" aos-delay="200">
            <div class="text">
                The company earnestly implerents the ISO9oo1 quality management system, has a complete management system, based on 6S lean management, to create an high efficient factory , to provide customers with high quality products.
            </div>
        </div>
    </div>

    <div class="section3">
        <div class="title" aos="fade-up">Our Workspace</div>
        <div class="content">
            <div class="flex">
                <div class="item" aos="fade-up">
                    <div class="img">
                        <img src="./images/img1.png" alt="">
                    </div>
                    <div class="text">One-to-one product inspection</div>
                </div>
                <div class="item" aos="fade-up" aos-delay="200">
                    <div class="img">
                        <img src="./images/img2.png" alt="">
                    </div>
                    <div class="text">Professional mold team</div>
                </div>
            </div>
            <div class="flex">
                <div class="item" aos="fade-up">
                    <div class="img">
                        <img src="./images/img3.png" alt="">
                    </div>
                    <div class="text">Sample display</div>
                </div>
            </div>
            <div class="flex">
                <div class="item" aos="fade-up">
                    <div class="img">
                        <img src="./images/img4.png" alt="">
                    </div>
                    <div class="text">Pump core automatic equipment</div>
                </div>
                <div class="item" aos="fade-up" aos-delay="200">
                    <div class="img">
                        <img src="./images/img5.png" alt="">
                    </div>
                    <div class="text">Grade 100,000 dust-free workshop</div>
                </div>
            </div>
        </div>
    </div>

    <div class="section4">
        <svg class="bg" xmlns="http://www.w3.org/2000/svg" width="1920" height="818" viewBox="0 0 1920 818" fill="none">
            <path d="M0 300C0 134.315 134.315 0 300 0H1920V518C1920 683.685 1785.69 818 1620 818H0V300Z" fill="#F8F8F8"/>
        </svg>
        <div class="title">
            <h1 aos="fade-up">Exhibition Cases</h1>
            <div aos="fade-up" aos-delay="200">
                <p>Our company will go to different countries to participate in the exhibition every year, welcome to visit our booth.</p>
            </div>
        </div>
        <div class="content" aos="fade-up" aos-delay="100">

            <div class="swiper2 swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="img" data-swiper-parallax-scale="0.6134259259259259" data-swiper-parallax-opacity=".4">
                                <img src="./images/item2.png" alt="">
                            </div>
                            <div class="text">
                                <h1>
                                    2022 Shanghai China<br>
                                    Beauty Expo
                                </h1>
                                <div class="pick">
                                    Shanghai China Beauty Expo is the largest and most professional beauty expo in China, including not only daily cosmetics, skin care, beauty brands, but also raw materials, packaging, equipment and other supply chains.
                                </div>
                                <div class="time">July.25.2024</div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="img" data-swiper-parallax-scale="0.6134259259259259" data-swiper-parallax-opacity=".4">
                                <img src="./images/item2.png" alt="">
                            </div>
                            <div class="text">
                                <h1>
                                    2022 Shanghai China<br>
                                    Beauty Expo
                                </h1>
                                <div class="pick">
                                    Shanghai China Beauty Expo is the largest and most professional beauty expo in China, including not only daily cosmetics, skin care, beauty brands, but also raw materials, packaging, equipment and other supply chains.
                                </div>
                                <div class="time">July.25.2024</div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="img" data-swiper-parallax-scale="0.6134259259259259" data-swiper-parallax-opacity=".4">
                                <img src="./images/item2.png" alt="">
                            </div>
                            <div class="text">
                                <h1>
                                    2022 Shanghai China<br>
                                    Beauty Expo
                                </h1>
                                <div class="pick">
                                    Shanghai China Beauty Expo is the largest and most professional beauty expo in China, including not only daily cosmetics, skin care, beauty brands, but also raw materials, packaging, equipment and other supply chains.
                                </div>
                                <div class="time">July.25.2024</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="button">
                <img src="./images/prev.png" alt="">
                <img src="./images/next.png" alt="">
            </div>
        </div>
    </div>

    <div class="section5">
        <img src="./images/tu1.png" class="i1" alt="">
        <img src="./images/tu2.png" class="i2" alt="">
        <img src="./images/tu3.png" class="i3" alt="">
        <div class="title">
            <h1 aos="fade-up">our partner</h1>
            <div aos="fade-up" aos-delay="200">
                <p>Some brands where you can find our product!</p>
            </div>
        </div>
        <div class="content" aos="fade-up" aos-delay="200">
            <div class="swiper3 swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/de1.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/de2.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/de3.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/de4.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/de5.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/de6.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section_bg">
        <p class="p1" aos="fade-up">Contact Us</p>
        <div class="des" aos="fade-up" style="transition-delay: 200ms;">
            NINGBO YUNBANG COMMODITIES TECHNOLOGY CO., LTD.<br>
            Professional cosmetic packaging manufacturer. Explore more of our details.
        </div>
        <a class="button noset" aos="fade-up" aos-delay="400" href="./contact.html">
            <span class="dot"></span>
            <span class="text">Contact Now</span>
        </a>
    </div>



    <div class="foot">
        <div class="dom1">
            <div class="item">
                <p class="p1">Products</p>
                <div class="aList">
                    <a href="">airless bottle series</a>
                    <a href="">lotion pump</a>
                    <a href="">Airless pump</a>
                    <a href="">sprayer pump</a>
                    <a href="">dropper</a>
                    <a href="">cream Jar series</a>
                    <a href="">Glass bottle series</a>
                </div>
            </div>
            <div class="item">
                <p class="p1">Creative Product</p>
                <div class="aList">
                    <a href="">Surface treatment process</a>
                    <a href="">Product color matching</a>
                    <a href="">Design concept</a>
                </div>
            </div>
            <div class="item">
                <p class="p1">About Us</p>
                <div class="aList">
                    <a href="">Profile</a>
                    <a href="">Culture</a>
                    <a href="">Workspace</a>
                    <a href="">Exhibition</a>
                </div>
            </div>
            <div class="r">
                <p class="p1">Contact</p>
                <div class="des">
                    <p>Wechat/WhatsApp: +86 13486448648</p>
                    <p>Emali: 605109526@qq.com hz970207@gmail.com </p>
                    <p>Alibaba: https://yunbangryp.en.alibaba.com</p>
                </div>
                <div class="form">
                    <input type="text" placeholder="Enter Your Email">
                    <a href="">Subsribe</a>
                </div>
                <div class="icons">
                    <a href="https://www.facebook .com/profile.php?id=100062550642717&mibextid=LQQJ4d" target="_blank">
                        <img src="./images/f1.svg" alt="">
                    </a>
                    <a href="http://linkedin.com/in/noah-zhang-aba832204" target="_blank">
                        <img src="./images/f2.svg" alt="">
                    </a>
                    <a href="https://x.com/Noah_Hao7" target="_blank">
                        <img src="./images/f3.svg" alt="">
                    </a>
                    <a  href="https://www.instagram.com/noah_hao?igsh=eWNreTdrZ3phag%3D%3D&utm_source=qr" target="_blank">
                        <img src="./images/f4.svg" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="dom2">
            <div class="l">
                COPYRIGHT O 2024 LIGHTSPACE INTERNATIONAL AG.
            </div>
            <div class="r">
                <a href="">Terms and Conditions Privocy Policy</a>
            </div>
        </div>
    </div>

</div>
<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/swiper.js"></script>
<script src="./js/gsap.min.js"></script>
<script src="./js/aos.js"></script>
<script src="./js/common.js"></script>
<script src="./js/countUp.js"></script>
<script>
    new Swiper('.swiper1', {
        speed: 1000,
        loop: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        spaceBetween: 20,
        navigation: {
            nextEl: '.home .section2 .l .button img:last-child',
            prevEl: '.home .section2 .l .button img:first-child',
        },
    })
    setTimeout(function () {
        $('.each_animate').addClass('on')
    },10)

    new Swiper('.swiper2', {
        speed: 1000,
        spaceBetween: 70,
        slidesPerView: 3,
        parallax : true,
        initialSlide: 1,
        centeredSlides: true,
        loop: true,
        navigation: {
            nextEl: '.home .section4 .content .button img:last-child',
            prevEl: '.home .section4 .content .button img:first-child',
        },
        breakpoints: {
            100: {
                spaceBetween: 20,
                slidesPerView: 1,
            },
            1024: {
                spaceBetween: 70,
                slidesPerView: 3,
            },
        }
    })

    new Swiper('.swiper3', {
        loop: true,
        slidesPerView : 6,
        spaceBetween: 36,
        speed: 6000,
        allowTouchMove: false,
        autoplay: {
            delay: 0,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        breakpoints: {
            100: {
                slidesPerView : 2,
                spaceBetween: 20,
            },
            1024: {
                slidesPerView : 6,
                spaceBetween: 36,
            },
        },
    })
</script>
</body>

</html>